<template>
  <div class="flex h-content w-screen px-3 justify-center">
    <!--左侧边栏 （PC端，移动端无此项）-->
    <div
      class="lg:row-span-3 hidden lg:flex lg:w-1/6 lg:mr-3 border rounded-xl justify-evenly flex-col items-center">
      <!--头像-->
      <el-avatar
        :src="creator.userAvatar"
        class="h-28 w-28 lg:m-0 m-3.5"
      />
      <!--昵称-->
      <div class="text-3xl font-medium">{{ creator.userName }}</div>
      <!--提问者数据-->
      <div class="">
        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">
          <span>提问数量：</span><span>{{ creator.userQuestionCount }}</span></div>
        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">
          <span>回答数量：</span><span>{{ creator.userAnswerCount }}</span></div>
        <div class="mt-2.5 w-40 flex justify-between items-center border-b-2 border-dotted">
          <span>优质提问权重：</span><span>{{ creator.userReputation }}</span></div>
      </div>
      <!--      &lt;!&ndash;加/删好友&ndash;&gt;-->
      <!--      <el-button v-if="!isFriend" class="mt-2.5 bg-green-400" type="success" @click="()=>{isFriend = !isFriend}">-->
      <!--        ❤加好友-->
      <!--      </el-button>-->
      <!--      <el-button v-if="isFriend" class="mt-2.5 bg-gray-400" type="info" @click="()=>{isFriend = !isFriend}">💔删好友-->
      <!--      </el-button>-->
    </div>
    <div class="flex overflow-y-auto h-content max-w-xl flex-col">
      <!--问题栏-->
      <div class="lg:mt-0
      flex-1 flex p-3 border rounded-xl">
        <div class="flex flex-col w-full h-full">
          <!--提问标题-->
          <div class="h-16 flex justify-center text-xl break-words font-semibold p-3">
            {{ questionItem.problem_title }}
          </div>

          <!--问题图片-->
          <div class="flex">
            <div class="flex flex-col justify-center float-left">
              <el-tooltip effect="light" placement="right">
                <template #content>如果你觉得这个问题有研究价值，<br />请为这个问题增加声望</template>
                <ArrowUp class="w-8 h-8" @click="like" />
              </el-tooltip>
              <div class="text-xl mt-5 flex justify-center items-center">{{ questionItem.problem_reputation }}</div>
              <el-tooltip effect="light" placement="right">
                <template #content>如果你觉得这个问题毫无研究价值，<br />请为这个问题减少声望</template>
                <ArrowDown class="w-8 h-8 mt-5"
                           @click="disLike" />
              </el-tooltip>
            </div>
            <div class="flex w-full items-center my-3 justify-center">
              <img :src=questionImage
                   class=" object-coverh-full w-48 rounded-xl">
            </div>
          </div>

          <!--提问内容-->
          <div class="h-full container flex text-left break-words">
            <div class="ml-5 w-full h-full break-all">
              {{ questionItem.problem_content }}
            </div>

          </div>
          <!--提问者-->
          <div class="flex w-full justify-end">
            <div class="flex lg:hidden flex-col items-center justify-center ">
              <!--头像-->
              <el-avatar
                class="h-18 w-18"
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              />
              <!--昵称-->
              <div class="text-xl font-medium">{{ creator.userName }}</div>
              <!--加/删好友-->
              <el-button v-if="!isFriend" class="mt-2.5 bg-green-400" size="small" type="success"
                         @click="()=>{isFriend = !isFriend}">
                ❤加好友
              </el-button>
              <el-button v-if="isFriend" class="mt-2.5 bg-gray-400" size="small" type="info"
                         @click="()=>{isFriend = !isFriend}">💔删好友
              </el-button>
            </div>
          </div>
          <!--tags-->
          <div class="h-16 grid grid-flow-col lg:gap-2 p-3">
            <el-tag v-for="tag in tabs" :key="tag" class="ml-2" type="success">{{ tag }}</el-tag>
          </div>
        </div>

      </div>
      <!--回答栏-->
      <answer-list v-if="questionItem.answer_count"
                   :question-id="questionItem.problem_id"
                   class="lg:row-span-1 lg:mt-2 lg:col-span-2 flex-1 mt-3.5 border rounded-xl p-3" />
      <!--回答框-->
      <div
        class="lg:row-span-1 lg:mt-2 lg:col-span-2 flex-1 mt-3.5 w-full h-full border rounded-xl p-3">
        <el-input
          v-model="answerArea"
          :autosize="{ minRows: 10, maxRows: 20 }"
          placeholder="先知，您的回答是？"
          type="textarea"
        />
        <el-button class="mt-2.5 bg-green-400 float-right" type="success" @click="answerQuestion">
          提交回答
        </el-button>
      </div>
    </div>

  </div>


</template>

<script lang="ts" setup>
import AnswerList from "@/components/Q&A/AnswerList.vue";
import router from "@/router";
import { answerQuestionApi, getQuestionItem, questionReputationChange } from "@/utils/api/questions";
import { queryUserById } from "@/utils/api/user";
import { ArrowDown, ArrowUp } from "@element-plus/icons-vue";
import { onBeforeUnmount, onMounted, ref } from "vue";

const isFriend = ref(true);
const answerArea = ref("");
let queryId: string = "";
if (router.currentRoute.value.query.id === null) {
  router.push("/");
} else {
  queryId = router.currentRoute.value.query.id.toString();
}

const like = () => {
  questionReputationChange(questionItem.value.problem_id, 1).then(() => {
    refreshData();
  });
};
const disLike = () => {
  questionReputationChange(questionItem.value.problem_id, -1).then(() => {
    refreshData();
  });
};
let questionImage = ref("http://81.70.162.219:7345/upload/ff395ed9-cd52-43b3-a268-3c81899862ab.png");
let questionItem = ref({
  problem_id: 0,
  problem_title: "",
  problem_content: "",
  problem_reputation: 0,
  problem_type: "",
  creator: 0,
  answer_count: 0,
  file_table: {
    file_path: ""
  }
});
let tabs = ref([] as string[]);

const answerQuestion = () => {
  answerQuestionApi(queryId, answerArea.value).then(() => {
    answerArea.value = "";
    refreshData();

  });
};

const creator = ref({
  userReputation: 0,
  userName: "",
  userAvatar: "",
  userQuestionCount: 0,
  userAnswerCount: 0
});


const refreshData = () => {
  if (router.currentRoute.value.query.id !== null) {
    const questionId = Number.parseInt(router.currentRoute.value.query.id.toString());
    getQuestionItem(questionId).then((res) => {
      questionItem.value = { ...res.data };
      tabs.value = res.data.problem_type.split(",");
      questionImage.value = "http://81.70.162.219:7345/upload/" + res.data.file_table.file_path;
      queryUserById(res.data.creator).then((res) => {
        creator.value.userReputation = res.data.question_reputation;
        creator.value.userName = res.data.name;
        //TODO: baseURL 的配置，需要在配置文件里体现或者在运行环境里进行配置
        creator.value.userAvatar = "http://81.70.162.219:7345/upload/" + res.data.file_table.file_path;
        creator.value.userQuestionCount = res.data.question_count;
        creator.value.userAnswerCount = res.data.answer_count;
      });
    });
  }
};

let timeOut: number | undefined = undefined;
onMounted(() => {
  refreshData();
  timeOut = setTimeout(() => {
    like();
  }, 10000);
});

onBeforeUnmount(() => {
  clearTimeout(timeOut);
});
</script>

<style scoped>

</style>
